<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!-- 字数统计 https://www.jq22.com/yanshi3282 -->

<body>
    <div id="app">
        <textarea v-model="text" @input="item" placeholder="请输入内容"></textarea>
        <p>剩余字数：{{ max - text.length }}</p>
    </div>
</body>

<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const text = ref('');
            const max = 10;

            function item() {
                if (text.value.length > max) {
                    text.value = text.value.slice(0, max);
                }
            }
            return {
                text,
                max,
                item
            }
        }
    }).mount('#app')
</script>

</html>